<template>
    <div>
        <Button>Default</Button>
        <Button type="primary">Primary</Button>
        <Button type="ghost">Ghost</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="text">Text</Button>
        <br><br>
        <Button type="info">信息按钮</Button>
        <Button type="success">成功按钮</Button>
        <Button type="warning">警告按钮</Button>
        <Button type="error">错误按钮</Button>

        <Row>
            <Col span="12">
            <TimePicker type="time" placeholder="选择时间" style="width: 168px"></TimePicker>
            </Col>
            <Col span="12">
            <TimePicker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></TimePicker>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <Button type="primary" @click="info">显示普通提醒</Button>
            </Col>
        </Row>

        <Row>
            <Col span="12">
            <Rate allow-half v-model="valueHalf"></Rate>
            </Col>
        </Row>

        <Row>
            <Col span="12">
            有默认值
            <ColorPicker v-model="color1" />
            </Col>
            <Col span="12">
            无默认值
            <ColorPicker v-model="color2" />
            </Col>
        </Row>

    </div>
</template>
<script>
    export default {
        data () {
            return {
                valueHalf: 2.5,
                color1: '#19be6b',
                color2: ''
            }
        },
        methods: {
            info () {
                this.$Message.info('这是一条普通的提醒');
            }
        }
    }
</script>